<template>
	<view>
		<!-- 我的服务 -->
		<view class="my-service">
			<text class="service">基础资料</text>
		</view>
		
		<view class="my-service-item">
			
			<view class="service-item">
				<view class="service-item-left">
					<text>头像</text>
				</view>
				<image :src="'https://z3.ax1x.com/2021/05/06/glLxRH.jpg' || userData.salt" class="item-right-image"></image>
			</view>
			<view class="service-item">
				<view class="service-item-left">
					<text>昵称</text>
				</view>
				<view class="item-right-text">
					<text>{{userData.nickName}}</text>
					<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="item-images"></image>
				</view>
			</view>
			<view class="service-item">
				<view class="service-item-left">
					<text>蜗牛ID</text>
				</view>
				<view class="item-right-text"><text class="text-itemsa">{{userData.id}}</text></view>
			</view>
			<view class="service-item">
				<view class="service-item-left">
					<text>性别</text>
				</view>
				<view class="item-right-text">
					<text>{{userData.sex}}</text>
					<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="item-images"></image>
				</view>
			</view>
			
		</view>
		
		
		<!-- 登录 -->
		<view class="my-service">
			<text class="service">登录</text>
		</view>
		
		<view class="my-service-item">
			
			
			<view class="service-item">
				<view class="service-item-left">
					<text>安全手机</text>
				</view>
				<view class="item-right-text">
					<text>{{userData.username}}</text>
					<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="item-images"></image>
				</view>
			</view>
	
			<view class="service-item">
				<view class="service-item-left">
					<text>安全邮箱</text>
				</view>
				<view class="item-right-text">
					<text>未绑定</text>
					<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="item-images"></image>
				</view>
			</view>
			
		</view>
		
		
		
		<!-- 安全 -->
		<view class="my-service">
			<text class="service">安全</text>
		</view>
		
		<view class="my-service-item">
			
			<view class="service-item">
				<view class="service-item-left">
					<text>修改密码</text>
				</view>
				<view class="item-right-text">
					<image src="https://z3.ax1x.com/2021/04/22/cOPp26.png" mode="" class="item-images"></image>
				</view>
			</view>
			
		</view>
		
		<!-- 退出登录 -->
		<view class="my-service-item  serviceActive" @tap="loginout">退出登录</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	import {createNamespacedHelpers}from 'vuex'
	const {mapMutations,mapState} = createNamespacedHelpers('UserInfor')
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapState(['userData'])
		},
		methods: {
			...mapMutations(['eliminateToken']),
			loginout(){
				
				uni.showModal({
				    title: '提示',
				    content: '确定退出吗',
				    success:(res)=> {
				        if (res.confirm) {
				         
						   this.eliminateToken()
						   uni.removeStorage({
						   	key:'token',
						   	success:(res)=> {
						   		uni.reLaunch({
						   			url:'/pages/personal/personal'
						   		})
						   	}
						   })
						   
				        } else if (res.cancel) {
				            // console.log('用户点击取消');
				        }
				    }
				});
				
				
				
				
			}
		},
	}
</script>

<style>

	/* 我的服务 */
	.my-service {
		width: 660rpx;
		height: 70rpx;
		/* border: 1px solid red; */
		margin: 0rpx auto;
		display: flex;
		line-height: 100rpx;
	}
	.service {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 70rpx;
		color: #666666;
	}


	.my-service-item {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 18rpx;
		margin: 0rpx auto;
	}

	.service-item {
		width: 100%;
		height: 88rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
		display: flex;
		justify-content: space-between;
	}

	.service-item-left {
		width: 50%;
		height: 88rpx;
		/* border: 1rpx solid red; */
		padding-left: 20rpx;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 88rpx;
		clear: both;
	}

	.item-right-image {
		width: 65rpx;
		height: 65rpx;
		margin: 12rpx 25rpx;
		/* border: 1rpx solid red; */
		border-radius: 50%;
	}
	.item-right-text{
		width: auto;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin-left: 25rpx;
		/* border: 1rpx solid red; */
		display: flex;
		color: #999999;
		font-family: PingFang SC;
		font-size: 28rpx;
	}
	.item-images{
		width: 26rpx;
		height: 26rpx;
		margin: 35rpx 25rpx 0rpx 20rpx;
	}
	
	.text-itemsa{
		margin-right: 25rpx;
	}
	.serviceActive{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3476F1;
		line-height: 88rpx;
		text-align: center;
		margin-top: 25rpx;
	}
</style>
